<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分类</title>
    <link rel="stylesheet" href="semantic/semantic.css">
    <link rel="stylesheet" href="static/css/custom.css">
</head>
<body>
    <!--顶部导航-->
    <div class="ui attached secondary  stackable borderless menu ">
      <div class="left  menu">
          <a class="item brand">
            <img class="ui mini image" alt="网站图标" src="./static/image/icon.ico">
            <span class="m-text-title">大梁的博客</span>
          </a>
      </div>
      <div class="right  menu">
        <div class="item">
          <div class="ui icon input">
            <input type="text" placeholder="搜索...">
            <i class="search link icon"></i>
          </div>
        </div>
          <a class="item m-item m-mobile-hide" href="index.html"><i class="home icon"></i>首页</a>
          <div class="ui simple dropdown item m-item  m-mobile-hide">
            <i class="idea icon"></i>分类
            <i class="dropdown icon"></i>
            <div class="menu">
              <a class="item" href="category.html">测测试分类</a>
              <a class="item" href="category.html">测试分类2</a>
              <a class="item" href="category.html">测试分类3</a>
            </div>
          </div>
          <a class="item m-item m-mobile-hide" href="tags.html"><i class="tags icon"></i>标签</a>
          <a class="item m-item m-mobile-hide" href="photos.html"><i class="images icon"></i>相册</a>
          <a class="item m-item m-mobile-hide" href="archive.html"><i class="archive icon"></i>归档</a>
          <a class="item m-item m-mobile-hide" href="infocenter.html"><i class="rss square icon"></i>动态</a>
          <a class="item m-item m-mobile-hide" href="login.html"><i class="sign-in icon"></i>登录</a>
      </div>
    </div>
    <!--手机端-->
    <a href="#" title="缩放按钮" class="ui block icon button m-top-right m-mobile-show mobile-style">
      <i class="sidebar icon"></i>
    </a>
    <!--主要内容-->
    <div class="ui container vertical segment m-content">
          <!--使用网格 默认16份-->
          <div class="ui stackable grid">
            <div class="twelve wide column">
                <!--导航面包屑-->
                <div class="ui breadcrumb">
                    <a class="section">分类</a>
                    <div class="divider"> / </div>
                    <div class="section">测试分类1</div>
                </div>
                <div class="ui container  segment ">
                    <div class="ui  labeled button m-margin-top" tabindex="0">
                        <div class="ui basic blue button"> 测试分类1</div>
                        <a class="ui basic blue left pointing label">1</a>
                    </div>
                    <div class="ui labeled button m-margin-top" tabindex="0">
                        <div class="ui basic  button"> 测试分类2</div>
                        <a class="ui basic left pointing  label">2</a>
                    </div>
                    <div class="ui labeled button m-margin-top" tabindex="0">
                        <div class="ui basic  button"> 测试分类2</div>
                        <a class="ui basic left pointing  label">22</a>
                    </div>
                    <div class="ui labeled button m-margin-top" tabindex="0">
                        <div class="ui basic  button"> 测试分类2</div>
                        <a class="ui basic left pointing  label">33</a>
                    </div>
                    <div class="ui labeled button m-margin-top" tabindex="0">
                        <div class="ui basic  button"> 测试分类2</div>
                        <a class="ui basic left pointing  label">1</a>
                    </div>
                    <div class="ui labeled button m-margin-top" tabindex="0">
                        <div class="ui basic  button"> 测试分类2</div>
                        <a class="ui basic left pointing  label">1,048</a>
                    </div>
                </div>
              <!--博客列表-->
              <div class="ui segment" >
                <div class="ui  vertical segment">
                    <div class="ui stackable  mobile reversed grid">
                        <div class="eleven wide column ">
                            <h3 class="ui header" >这是测试的文章标题</h3>
                            <p>这是测试的内容这是测试的内容这是测试的内容这是测试的内
                                容这是测试的内容这是测试的内容这是测试的内容这是测试的内容这
                                是测试的内容这是测试试的内容这是测试试的内容这是测试的内容</p>
                            <div class="ui grid ">
                                <div class="eleven wide  column">
                                    <div class="ui horizontal link list">
                                        <div class="item">
                                            <img src="./static/image/head-02.jpg" alt="头像" class="ui avatar image">
                                            <div class="content"><a  href="#" class="header">七喜咸鱼</a></div>
                                        </div>
                                        <div class="item ">
                                            <i class="clock outline icon"></i>2021-01-01
                                        </div>
                                        <div class="item">
                                            <i class="eye icon"></i>2
                                        </div>
                                        <div class="item">
                                          <i class="comment outline icon "></i>12
                                        </div>
                                        <div class="item">
                                          <i class="thumbs up icon">10</i>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="five wide column">
                            <img  src="./static/image/background.jpg" alt="博客配图" class="ui rounded image"> 
                        </div>
                    </div>
                </div>
            </div>
            <!--第二个-->
          </div>
          <!--右侧内容-->
          <div class="four wide column" style="margin-top: 3%;">
                <div class="ui container segment">
                  <div class="ui two column centered grid">
                    <div class="center aligned column">
                      <img class="ui image" alt="头像" src="./static/image/head-02.jpg"></br>
                      <span class=" ui header">Liang</span></br></br>
                      <button class="ui blue button">关注</button>
                    </div>
                    <div class="four column centered row">
                        <div class="center aligned column"> 6
                        </br>
                          文章
                        </div>
                        <div class="center aligned column">
                          3
                          </br>
                          评论
                        </div>
                        <div class="center aligned column">
                          3
                          </br>
                          获赞
                        </div>
                    </div>
                  </div>
                  <!--分割线-->
                  <div class="ui divider"></div>
                  <i class="idea icon"></i>分类
                  
                  <div class="ui fluid vertical menu">
                      <a class="active blue item">
                        java
                        <div class="ui blue  left label">1</div>
                      </a>
                      <a class="item">
                        springboot
                        <div class="ui label">51</div>
                      </a>
                      <a class="item">
                        vue
                        <div class="ui  label">1</div>
                      </a>
                      <a class="item">
                          mysql
                            <div class="ui label">1</div>
                      </a>
                  </div>
                  <i class="tag icon"></i>标签
                  <div class="ui segment">
                    <!--参考label-->
                    <div class="ui blue labels">
                      <a class="ui label">springboot<div class="detail">1</div>
                      </a>
                      <a class="ui label">mysql<div class="detail">2</div>
                      </a>
                      <a class="ui label">Smart <div class="detail">3</div></a>
                      <a class="ui label">linux<div class="detail">22</div></a>
                      <a class="ui label">日常<div class="detail">22</div></a>
                    </div>
               </div>
                </div>
          </div>
        </div>
    </div>
    <!--底部-->
    <div class="ui vertical footer segment">
      <div class="ui container vertical">
        <div class="ui stackable three column grid">
          <div class="center aligned column"><i class="copyright outline icon"></i>2022  &nbsp;<i class="user icon"></i>大梁</div>
          <div class="center aligned column">Powered by semantic-ui | Theme by Default </div>
          <div class="center aligned column"> ICPX备2020XXXX号</div>
        </div>
      </div>
    </div>
<script src="./static/js/jquery-3.5.1.js"></script>
<script src="./semantic/semantic.js"></script>
<script type="text/javascript">
    $(function(){
        $('.ui .dropdown').dropdown();
        $(".mobile-style").click(function(){
        $(".m-item").toggleClass("m-mobile-hide");
    });
    });
</script>
</body>
</html>
